<template>
  <div class="header">
    <div class="logo">
      <img src="@/assets/source/logo.png" alt="" v-if="logo" />
      <span
        class="icon iconfont icon-fanhui"
        v-if="back"
        v-items
        @click="goback"
      ></span>
    </div>
    <div class="title">
      <span class="textline">{{ title }}</span>
    </div>
    <div class="quit">
      <span
        class="icon iconfont icon-shouye"
        ref="quit"
        v-items
        @up="!false"
        @right="!false"
        @left="!false"
        @click="quitApp"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    back: false,
    logo: false,
    title: false
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    inHeaderVitems() {
      this.$service.move(this.$refs.quit);
    },
    goback() {
      this.$router.go(-1);
    },
    quitApp() {
      this.$android.plusQuitApp();
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  color: #fff;
  font-size: 30px;
  width: 100%;
  height: 80px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(135deg, #e50011 0%, #1b1d81 100%);
  z-index: 99;
}
.logo {
  width: 30%;
  height: 100%;
  overflow: hidden;
}
.logo > img {
  display: block;
  margin-top: 18px;
  margin-left: 35px;
  width: 200px;
}
.logo > span {
  margin-left: 35px;
  line-height: 80px;
}
.title {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quit {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0px 30px;
}
.icon {
  font-size: 50px;
}
</style>
